<template>
  <div v-loading="loading">
    <el-row style="height: 200px">
      <el-col>
        <img :src="picUrl" alt="" style="width: 170px; height: 170px; margin: 15px" />
        <div class="contentMes">
          <el-icon class="icon1"><ElementPlus /></el-icon>
          <p class="name" v-if="name">
            {{ name.length > 17 ? name.substring(0, 16) + "..." : name }}
          </p>
          <br />
          <p class="tag">
            标签:
            <span v-for="item in tags">
              <el-tag type="success" size="large" style="margin: 2px">
                {{ item }}
              </el-tag>
            </span>
          </p>
          <span class="jianjie">简介:</span>
          <p class="des" v-if="desc">
            <span v-show="isfold">{{ desc.substring(0, 30) }}...</span>
            <span v-show="!isfold">{{ desc }}</span>
            <span @click="foldChange" style="color: blue">{{
              isfold ? "展开" : "收起"
            }}</span>
          </p>

          <el-button size="large" :icon="Search" class="playAllBtn" @click="playAll"
            >播放全部</el-button
          >
        </div>
      </el-col>
    </el-row>

    <div>
      <el-table :data="tableData" @row-dblclick="dblclick">
        <el-table-column type="index" />
        <el-table-column label="歌曲如下">
          <template #default="scope">
            <span> {{ scope.row.name }} </span>
            <!-- <span v-show="scope.row.survival === 0" style="color: red">
            (无音源或者可以播放)</span
          > -->
            <span v-show="scope.row.survival === 4" style="color: red">
              (需要购买专辑)</span
            >
            <span v-show="scope.row.survival === 1" style="color: red"> (VIP)</span>
            <img
              src="@/static/img/mv.svg"
              alt=""
              v-show="scope.row.mv !== 0"
              style="width: 20px; position: relative; top: 5px; left: 5px"
              @click="toMVPlayPage(scope.row.mv)"
            />
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <span
              v-for="item in scope.row.singers"
              class="artistName"
              @click="toSingerPage(item.id)"
            >
              {{ item.name + "     " }}
            </span>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <span class="artistName" @click="toAlbumPage(scope.row.albumId)">
              {{ scope.row.albumName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="playTime" label="" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from "vue";
import { storeToRefs } from "pinia";
import { getSongListContent, getSongUrl } from "../service/songs";
import { storage } from "@/stores/storage";
import { getArtistNames, getSongtime } from "@/utils/practicalFun";
import router from "../router";

export default defineComponent({
  name: "songListContent",
  mounted() {
    this.getSongListContentFun();
  },
  setup() {
    let isfold = ref(true);
    const store = storage();
    const { songListId } = storeToRefs(store);
    const loading = ref(true);

    function foldChange() {
      isfold.value = !isfold.value;
    }
    let tableData = ref([]);
    let mesData = reactive({
      name: "",
      desc: "",
      picUrl: "",
      tags: Array,
    });

    function getSongListContentFun() {
      getSongListContent(songListId.value)
        .then((res) => {
          if (res.status === 200) {
            let data = res.data.playlist.tracks;

            let contentMes = res.data.playlist;
            mesData.name = contentMes.name;
            mesData.desc = contentMes.description;
            mesData.picUrl = contentMes.coverImgUrl;
            mesData.tags = contentMes.tags;

            for (let i = 0; i < data.length; i++) {
              tableData.value[i] = {};
              tableData.value[i].name = data[i].name;
              tableData.value[i].id = data[i].id;
              tableData.value[i].picUrl = data[i].al.picUrl;

              tableData.value[i].albumId = data[i].al.id;
              tableData.value[i].albumName = data[i].al.name;
              tableData.value[i].singers = getArtistNames(data[i].ar);
              tableData.value[i].playTime = getSongtime(data[i].dt);
              tableData.value[i].survival = data[i].fee;
              tableData.value[i].mv = data[i].mv;
            }
            loading.value = false;
          }
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function playAll() {
      store.setIsPlayAll(true);
      store.clearSongPlayList();
      for (let i = tableData.value.length - 1; i >= 0; i--) {
        dblclick(tableData.value[i]);
      }
      setTimeout(() => {
        store.setIsPlayAll(false);
      }, 2000);
    }
    async function dblclick(row) {
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }
    function toAlbumPage(id) {
      store.setAlbumId(id);
      router.push({
        path: "/album",
      });
    }
    function toMVPlayPage(id) {
      store.setMVId(id);
      router.push({
        path: "/mvplay",
      });
    }
    return {
      tableData,
      ...toRefs(mesData),
      isfold,
      dblclick,
      getSongListContentFun,
      foldChange,
      toSingerPage,
      toAlbumPage,
      toMVPlayPage,
      playAll,
      loading,
    };
  },
});
</script>

<style scoped>
.contentMes {
  position: absolute;
  left: 200px;
  top: 15px;

  width: 700px;
  z-index: 10;
}
.name {
  font-size: 40px;
  width: 100%;
  position: absolute;
  left: 70px;
  top: 0;
}
.icon1 {
  font-size: 40px;
  position: absolute;
  top: 3px;
  left: 20px;
}
.tag {
  position: absolute;
  left: 20px;
  top: 50px;
}
.des {
  position: absolute;
  top: 100px;
  left: 65px;
  z-index: 1;
  background-color: white;
}
.jianjie {
  position: absolute;
  top: 100px;
  left: 20px;
}
.playAllBtn {
  position: absolute;
  top: 140px;
  left: 70px;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: black;
  cursor: pointer;
}
</style>
